<template>
  <view class="page-default">
    <c-nav-bar title="班级迎新统计" type="white" bg-color="rgba(255,255,255,0.6)" />

    <view class="m-3 mb-4 mt-6 rounded-2 bg-white bg-opacity-90 px-4 pb-8 pt-2 line-height-6">
      <view class="my-4 flex items-center justify-center">
        <up-select
          v-model:current="cateId" label="2025年新生" class="font-bold"
          :options="cateList" item-color="#6E7B8B" @select="selectItem"
        />
      </view>
      <view class="m-3 mt-4 flex items-center text-#1A2B5C font-bold">
        <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />男生公寓报到情况
      </view>

      <view class="flex border py-4">
        <view class="h-20 flex basis-1/2 items-center px-4">
          <ProcessChart color="blue" />
        </view>
        <view class="h-20 basis-1/2 px-4">
          <view class="flex items-center justify-between">
            <view><view class="mr-2 h-6px w-4 rounded-2 bg-#FFB412" /></view><view>应到</view><view class="text-#1A2B5C font-bold">
              500 人
            </view>
          </view>
          <view class="mt-1 flex items-center justify-between">
            <view><view class="mr-2 h-6px w-4 rounded-2 bg-#21D155" /></view><view>实到</view><view class="text-#1A2B5C font-bold">
              500 人
            </view>
          </view>
          <view class="mt-1 flex items-center justify-between">
            <view><view class="mr-2 h-6px w-4 rounded-2 bg-#FC2D57" /></view><view>未到</view><view class="text-#1A2B5C font-bold">
              500 人
            </view>
          </view>
        </view>
      </view>
      <view class="px-2 py-2">
        <u-line dashed />
      </view>
      <view class="m-3 mt-4 flex items-center text-#1A2B5C font-bold">
        <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />女生公寓报到情况
      </view>
      <view class="flex border py-4">
        <view class="h-20 flex basis-1/2 items-center px-4">
          <ProcessChart color="yellow" />
        </view>
        <view class="h-20 basis-1/2 px-4">
          <view class="flex items-center justify-between">
            <view><view class="mr-2 h-6px w-4 rounded-2 bg-#FFB412" /></view><view>应到</view><view class="text-#1A2B5C font-bold">
              500 人
            </view>
          </view>
          <view class="mt-1 flex items-center justify-between">
            <view><view class="mr-2 h-6px w-4 rounded-2 bg-#21D155" /></view><view>实到</view><view class="text-#1A2B5C font-bold">
              500 人
            </view>
          </view>
          <view class="mt-1 flex items-center justify-between">
            <view><view class="mr-2 h-6px w-4 rounded-2 bg-#FC2D57" /></view><view>未到</view><view class="text-#1A2B5C font-bold">
              500 人
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import ProcessChart from './common/process.vue';

const cateId = ref('1');
const cateList = ref([
  {
    id: '1',
    name: '2025级',
  },
  {
    id: '2',
    name: '2024级',
  },
  {
    id: '3',
    name: '2023级',
  },
]);
</script>

<style lang="scss" scoped>
.page-default {
  width: 100%;
  min-height: 100vh;
  background: url('@/static/images/welcome/header-bg.png') no-repeat center top ;
  background-size: 100% 50%;
}
.bg-green-rgba {
  background: rgba(231, 246, 234, 0.9);
  border: 1px solid #fff;
}
:deep(.u-line-progress__text){
  color: #2D7AFC !important;
  font-size: 16px !important;
  font-weight: bold !important;
}
.bg-blue-trsans{
  background: linear-gradient(to bottom, #e9f7fb,transparent, transparent);
}
.bg-green-trsans{
  background: linear-gradient(to bottom, #e6f9f7,transparent, transparent);
}
.bg-yellow-trsans{
  background: linear-gradient(to bottom, #fdf6e6,transparent, transparent);
}
.border-line {
  border: 1px #ffffff solid;

}
.border-line-dashed{
  border-bottom: 1px #e0e7ec dashed;
}
:deep(.u-select__content .active .u-select__item_text){
  color:#3AA69B !important;
}
:deep(.u-select__content .u-select__options__wrap){
 top: 30px ;
}
</style>
